<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>单机模式</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  <!--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
  <link rel="stylesheet" type="text/css" href="css/zzsc.css">
  <link rel="stylesheet" type="text/css" href="css/style2.css">

  <script src="js/jquery-3.5.1.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/wangEditor.min.js"></script>

  <script type="text/javascript">


    // const editor = new E( document.getElementById('div1') )
    //>>>>>>>>>>>>>>>>新增变量,轮到玩家
    let nowIsPlayer = true;

    let lastx = -123456789, lasty = -123456789;
    let computerPlayChessSign = true;
    //<<<<<<<<<<<<<<<<<

    // 棋手编号 0 ~ 3 (包含3)
    let piecesPlay = 0;
    //
    // 其他棋手的编号
    let otherFirstPlayer = 1;
    let otherSecondPlayer = 2;
    let otherThirdPlayer = 3;

    // 全局变量
    let piecesColor = ['r1', 'y1', 'b1', 'g1']; // 棋手所用棋子颜色标志
    let notPosition = ['r2', 'y2', 'b2', 'g2']; // 棋手在该区域不能下棋子标志
    let canPosition = ['r3', 'y3', 'b3', 'g3']; // 棋手可在该区域下棋子标志
    let color = ['red', 'yellow', 'blue', 'green'];
    let con; //棋子需要用到的数组
    let boxIndex; // 棋盘需要用到的数组
    // 以最中间的一个格子为中心，上下左右各含有几个棋子
    let leftNum;
    let rightNum;
    let upperNum;
    let lowerNum;
    let determine; // 标记哪些棋子被用了
    let choose = 0;// 聚焦的棋子
    let first = true; // 标记是否下的为第一步

    //电脑1,2,3
    //let

    // 屏幕的高和宽
    let scWidth = screen.width;
    let scHeight = screen.height;

    // 旋转、翻转需要用到的参数
    let angle1 = -1;
    let angle2 = 90;
    let angle3 = -1;

    // 棋盘参数
    let boxLength = 800;
    let gridLength = 40;



    //复盘
    var replay = new Array();
    var rnum = 0;
    var nownum = 0;

    //控制说明是否显示
    let f = false;

    // //初始化电脑的棋子使用情况
    // window.onload = function() {
    //   initComputerUsed();
    // }

    $(function() {
      const E = window.wangEditor
      const editor = new E('#toolbar-container', '#text-container')
      // // 或者 const editor = new E( document.getElementById('div1') )

      editor.config.menus=[
        // 'head',  // 标题
        // 'bold',  // 粗体
        // 'fontSize',  // 字号
        // 'fontName',  // 字体
        // 'italic',  // 斜体
        // 'underline',  // 下划线
        // 'strikeThrough',  // 删除线
        // 'foreColor',  // 文字颜色
        // 'backColor',  // 背景颜色
        // 'link',  // 插入链接
        // 'list',  // 列表
        // 'justify',  // 对齐方式
        // 'quote',  // 引用
        // 'emoticon',  // 表情
        // 'image',  // 插入图片
        // 'table',  // 表格
        // 'video',  // 插入视频
        'code',  // 插入代码
        'undo',  // 撤销
        // 'redo'  // 重复
      ];

      editor.create();
      editor.txt.html('<pre type="Java"><code><xmp>' +
              'private static int[] computerPlay1(int no, int[] a) {' +'\n'+
              '}'+
              '</xmp></code></pre>');




      $('#send').click(function () {
        let context = editor.txt.html();
        let size = context.length;
        let a = context.substring(28,size - 19);
        $.ajax({
          url: "http://localhost:8081/compile/getanswer",
          type: 'POST',
          dataType: 'json',
          contentType: "application/json;charset=utf-8;",
          data:JSON.stringify(a),
          success:function(data){
            console.log(data.answer);

            let a = [];
            a = data.answer.split("|");
            let num = 0;
            for(let l = 0; l < a.length; l++){
              replay[l] = new Array();
              let split = [];
              split = a[l].split("#");
              for(let i = 0; i < split.length; i++){
                replay[l][i] = new Array();
                let x = [];
                x = split[i].split(",");
                for(let j = 0; j < x.length; j++){
                  replay[l][i][j] = x[j];
                }
              }
              num++;
            }
            console.log(replay);
            alert("编译完成");
            drawChessBoard(replay[num-1]);
            rnum = num;
            nownum = num-1;
          },
          error:function(e){
          }
        });
      });
      // editor.highlight = hljs;

      //websocket();
      // 初始化棋盘
      initChessBoard();

      // 在候选区画出棋子
      // drawChess();
      // 为每个在候选区的棋子添加点击事件，使其可以显示在展示区
      // candChessClick();
      // 展示区内的棋子添加操作
      // chessChangeOperating();

      //打印boxIndex
      printBoxIndex();



      // $("#bgmup").click(function () {
      //     var audio =$('#bgm') ;//jQuery对象
      //     var au=audio.get(0); //DOM对象
      //     au.pause();
      //     $("#bgmup").css("display","none");
      //     $("#bgmoff").css("display","inline-block");
      // });

      // $("#bgmoff").click(function () {
      //     var audio =$('#bgm') ;//jQuery对象
      //     var au=audio.get(0); //DOM对象
      //     au.play();
      //     $("#bgmoff").css("display","none");
      //     $("#bgmup").css("display","inline-block");
      // });



      $('#button6').click(function () {
        // var audio =$('#bm') ;//jQuery对象
        // var au=audio.get(0); //DOM对象
        // au.play();
        if(nownum > 0){
          nownum--;
          console.log(rnum)
          console.log(nownum)
          drawChessBoard(replay[nownum]);
        }else {
          drawChessBoard(replay[nownum]);
        }
      });
      $('#button7').click(function () {
        // var audio =$('#bm') ;//jQuery对象
        // var au=audio.get(0); //DOM对象
        // au.play();
        if(nownum < rnum-1){
          nownum++;
          console.log(rnum)
          console.log(nownum)
          drawChessBoard(replay[nownum]);
        }else {
          drawChessBoard(replay[nownum]);
        }
      });

    })

    // 初始化棋盘
    function initChessBoard() {
      // 棋盘尺寸 20 * 20
      let boardSize = 20 * 20;
      let grid = '';
      for (let i = 0; i < boardSize; i++) {
        grid += '<div class="grid' + (i + 1) + '"></div>';
      }
      $('.chess-board').html(grid);
      boxIndex = new Array();
      for (let i = 0; i < 21; i++) {
        boxIndex[i] = new Array();
        for (let j = 0; j < 21; j++) {
          boxIndex[i][j] = 0;
        }
      }
      boxIndex[20][1] = 'r3';
      boxIndex[20][20] = 'y3';
      boxIndex[1][20] = 'b3';
      boxIndex[1][1] = 'g3';
    }

    //打印boxIndex二维数组
    function printBoxIndex() {
      console.log(boxIndex)
    }




    // 渲染棋盘
    function drawChessBoard(boxIndex) {
      for (let i = 1; i <= 20; ++i) {
        for (let j = 1; j <= 20; ++j) {
          let k = (i - 1) * 20 + j;

          if (boxIndex[i][j] === 'r1') {
            $('.grid' + k).css('background-color', 'red');
          }
          if (boxIndex[i][j] === 'y1') {
            $('.grid' + k).css('background-color', 'yellow');
          }
          if (boxIndex[i][j] === 'b1') {
            $('.grid' + k).css('background-color', 'blue');
          }
          if (boxIndex[i][j] === 'g1') {
            $('.grid' + k).css('background-color', 'green');
          }

          if(boxIndex[i][j] != 'r1' && boxIndex[i][j] != 'y1' && boxIndex[i][j] != 'b1' && boxIndex[i][j] != 'g1')
            $('.grid' + k).css('background-color', '');

        }
      }
    }

    function mychange() {
      if(f == true){
        $("#explain").css("display", "none");
        f = false;
      }else{
        $("#explain").css("display", "inline-block");
        f = true;
      }

    }


  </script>

</head>
<body>
<audio preload="auto"  id="bm">
  <source src="music/button02a.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

<!--<div class="candidate" id="chplace">-->
<!--  <div class="chess-place"></div>-->
<!--  <div style="position: absolute; left: 160px; bottom: -55px">-->
<!--    <button type="button" class="btn btn-primary btn-lg" id="button5" >永久跳过</button>-->
<!--  </div>-->
<!--</div>-->
<div id="compile" style="position: absolute; width: 500px; height: 650px; z-index: 9; right: 25px; top: 75px;">
  <!--  <p>输入代码</p>-->
  <div id="toolbar-container" class="toolbar"></div>

  <div id="text-container" style="width:500px; height:750px; background: #1cbbb4;border-width: 0.02rem .02rem .02rem .02rem;
            border-radius: .5rem .5rem .5rem .5rem;" class="text">

  </div>
  <button id="send" class="btn btn-primary btn-lg" >发送</button>
</div>
<div style="position: absolute; right: 25px; top: 25px;" >
  <button type="button" class="btn btn-primary btn-lg" id="button8" style="z-index: 99999"  onclick="mychange()">说明</button>
</div>
<div id="explain" style="position: absolute; top: 50px; left: 750px;background: white; z-index: 99999; display: none; background: lightyellow;
border-width: 0.02rem .02rem .02rem .02rem;
            border-style: solid;
            border-radius: .35rem .35rem .35rem .35rem;">

  <p style="margin-left: 10px"><br><br>
    在右边传入代码后点击上传，就能将代码传入后端。<br><br>
    之后一局的四个人都上传代码后就会进行编译。<br><br>
    编译完成后就会显示结果，以及整个棋局。<br><br>
    得到棋局后可以通过左边的上一步、下一步进行复盘。<br><br>
    <br><br>
    介绍棋局所用变量
    <br><br>
    棋盘是由21X21的字符串数组构成，只使用了1到20这20个位置，0位没有使用。<br><br>
    static String[][] boxIndex = new String[21][21];<br><br>
    <br><br>
    这个是装棋子用的数组，一共有21个棋子。每个棋子都用8X8的数组组成。<br><br>
    在这个数组中棋子占据的地方设置为r1、y1、b1、g1，具体是那个，由棋手的棋号决定。<br><br>
    static String[][][] con = new String[22][8][8];<br><br>
    <br><br>
    当决定下棋的时候请将con数组中对应的值填入<br><br>
    <br><br>
    这个是上传代码的样子，<strong>需要跟右侧的代码框架一样</strong>，如果传错就会无法显示。<br><br>
    private static int[] computerPlay1(int no, int[] a) {<br><br>
    <br><br>
    }<br><br>
    这个里面传入的变量no是指棋手编号，从0到3，分别代表红色，黄色，蓝色，绿色这四种颜色。<br><br>
    a是一个a[4]数组，当决定不下的时候请将a[no]设置为1，否则可能进入死循环无法得到结果。<br><br>
    <br><br>
    棋手所用棋子颜色标志<br><br>
    static String piecesColor[] = {"r1", "y1", "b1", "g1"};<br><br>
    <br><br>
    棋手在该区域不能下棋子标志<br><br>
    static String notPosition[] = {"r2", "y2", "b2", "g2"};<br><br>
    <br><br>
    棋手可在该区域下棋子标志<br><br>
    static String canPosition[] = {"r3", "y3", "b3", "g3"};<br><br>
    <br><br>
    标记哪些棋子被用了<br><br>
    static boolean[] determine = new boolean[22];<br><br>
    <br><br>
  </p>
</div>

<div class="box">
  <div class="chess-board"></div>
  <div class="chess-confirm">
<!--    <button type="button" class="btn btn-primary btn-lg" id="button4">确定</button>-->
  </div>

</div>

<!--<div class="exhibition" id="mychange">-->
<!--  <div class="exhi-content"></div>-->
<!--  <div class="exhi-operate">-->
<!--    <button type="button" class="btn btn-primary btn-lg" id="button1">左右翻转</button>-->
<!--    <button type="button" class="btn btn-primary btn-lg" id="button2">旋转</button>-->
<!--    <button type="button" class="btn btn-primary btn-lg" id="button3">上下翻转</button>-->
<!--  </div>-->
<!--</div>-->
<div style="position: absolute; left: 200px; bottom: 150px; display: inline-block" id="rebutton">

  <button type="button" class="btn btn-primary btn-lg" id="button6" >上一步</button>
  <button type="button" class="btn btn-primary btn-lg" id="button7" >下一步</button>
</div>
</body>
</html>
